<template>
  <div>
      <button @click="fn1">获取到div</button>
      <button @click="msg='massage'">修改msg</button>
      <button @click="msg='鸡鸭鱼'">修改msg</button>
      <button @click="chk = !chk">开关取反</button>

      <div ref="box" class="box">{{ msg }}</div>

      <BaseSwitch ref="sw" class="sw" v-model="chk"/>
  </div>
</template>

<script>
import BaseSwitch from './components/BaseSwitch.vue'
export default {

    components: {
        BaseSwitch
    },

    // 最早能访问到数据和方法的钩子
    // 做一些数据的初始化（例如发请求获取数据）
    created () {
        console.log('created', this.chk) // true
        this.sayHi() // 你好
    },

    beforeCreate () {
        console.log('beforeCreate', this.chk) // undefined
        // this.sayHi() // 报错
    },

    beforeMount () {
    console.log('beforeMount',this.$refs.box)
    },

    // 最早能访问到dom的钩子
    mounted () {
        console.log('mounted', this.$refs.box)
    },

    beforeUpdate () {
        // 这是在打印msg数据的值，和界面上的值
        // 在这个钩子，两个不一样，因为界面还没重新渲染
        console.log('beforeUpdate', this.msg, this.$refs.box.innerText)
    },

    // 数据改变且界面已经重新渲染
    updated () {
        // 在这个里面两个一样，因为界面渲染了
        console.log('updated', this.msg, this.$refs.box.innerText)
    },

    data () {

        return {
            chk: true,
            msg: '你好'
        }
    },
    methods: {
        sayHi () {

            console.log('你好')
        },

        fn1 () {

            // 如果找的是原生标签，得到他的dom对象
            console.log(this.$refs.box)
            // 如果找的是组件，得到这个组件对象
            console.log(this.$refs.sw)
            // 就可以访问组件内的数据
            console.log(this.$refs.sw.msg)
        }
    }
}
</script>

<style>

</style>